<template>
	<div class="remark">
		<Header :isLeft="true" title="订单备注"></Header>
		<div class="view-body">
			<section>
				<textarea name="" id="" cols="30" rows="10" v-model="text"
				 placeholder="填写额外对餐厅和骑手小哥的备注信息"></textarea>
				<div class="switch">
					<div class="switch-item item-line" v-for="item,index in radioItem" :key="index"
					:class="{'selected':item.select}" @click="changeStyle(item)">{{item.name}}</div>
					
				</div>
				<div class="switch" v-for="item1,index1 in switchItem" :key="index1" 
				  @click="changeStyle(item1)">
					<div :class="{'selected':item1.select}" class="switch-item">{{item1.name}}</div>
				</div>
			</section>
			<div class="btn-submit" @click="submitClick">确定</div>
		</div>
		
	</div>
</template>

<script>
	import Header from '../../components/Header.vue'
	export default{
		components:{
			Header
		},
		data(){
			return {
				radioItem:[
					{select:false,name:"不要辣"},
					{select:false,name:"少点辣"},
					{select:false,name:"多点辣"},
				],
				switchItem:[
					{select:false,name:"不要香菜"},
					{select:false,name:"不要洋葱"},
					{select:false,name:"多点醋"},
					{select:false,name:"多点葱"},
				],
				text:""
			}
		},
		methods:{
			changeStyle(item){
				item.select=!item.select
				
			},
			submitClick(){
				let selectItems=[]
				this.radioItem.forEach(item=>{
					if(item.select==true){
						selectItems.push(item.name)
					}
				})
				this.switchItem.forEach(item=>{
					if(item.select==true){
						selectItems.push(item.name)
					}
				})
				selectItems.push(this.text)
				selectItems=selectItems.join(',')
				console.log(selectItems)
				this.$store.dispatch('setRemarkInfo',{
					tableware:this.$store.getters.remarkInfo.tableware,
					remark:selectItems
				});
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
.remark {
  width: 100%;
  height: 100%;
  /* box-sizing: border-box; */
  padding-top: 45px;
}

.view-body {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* box-sizing: border-box; */
  font-size: 0.8rem;
  color: #333;
}
.view-body section {
  margin-top: 2.133333vw;
  padding: 4.266667vw;
  background-color: #fff;
  margin-bottom: 2.133333vw;
	vertical-align: top;
}
.view-body section textarea {
  width: 100%;
  height: 29.866667vw;
  margin-bottom: 4.266667vw;
  padding: 4.266667vw;
  border: 1px solid #ccc;
  border-radius: 0.666667vw;
  background-color: #f9f9f9;
  color: #666;
  resize: none;
  /* box-sizing: border-box; */
  outline: none;
}
.switch {
  display: inline-block;
  margin: 0 2.666667vw 2.666667vw 0;
  border: 1px solid #ddd;
  overflow: hidden;
  border-radius: 1.066667vw;
	
	
}
.switch-item {
  display: inline-block;
  padding: 0 2.133333vw;
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  color: #666;
	
}
.item-line::after {
  content: " ";
  display: inline-block;
  height: 4vw;
  width: 1px;
  background: #ddd;
  line-height: 8vw;
  vertical-align: middle;
  left: 2.266667vw;
  position: relative;
}
.btn-submit {
  display: block;
  padding: 3.466667vw 0;
  color: #fff;
  background-color: #00e067;
  border-radius: 0.533333vw;
  opacity: 0.98;
  width: 92vw;
  margin: 3.133333vw auto 0;
  font-size: 1rem;
	text-align: center;
}

/* 选中样式 */
.switch-item.selected {
  background: #0186ff;
  color: #fff;
  position: relative;
	animation: fade .6s ease;
}
@keyframes fade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
</style>
